List View Modifiers#

These modifiers allow you to customize how rows and sections behave and appear inside a <List> component.

Applies To:#

• Individual rows (e.g., <Text>, <HStack>, etc. inside <List>)
• Entire sections (e.g., <Section>)
• Or directly on the <List> component itself

listItemTint#

Sets the tint color applied to the row or its accessories (e.g., icons, buttons).

Type#

1listItemTint?: Color

Description#

• Use this to override the inherited tint color for a row or its content.
• Use null to avoid overriding the inherited tint.

Example#

1<Text
2  listItemTint="green"
3>
4  Tinted Row
5</Text>

listRowInsets#

Applies padding (insets) to a row in a list.

Type#

1listRowInsets?: number | EdgeInsets

Description#

• Use a single number to apply uniform padding.
• Use an EdgeInsets object to apply individual insets for top, bottom, leading, and trailing.

Example#

1<Text
2  listRowInsets={{
3    top: 10,
4    bottom: 10,
5    leading: 20,
6    trailing: 20
7  }}
8>
9  Custom Insets Row
10</Text>

listRowSpacing#

Controls the vertical spacing between adjacent rows.

Type#

1listRowSpacing?: number

Example#

1<List listRowSpacing={12}>
2  <Text>Row 1</Text>
3  <Text>Row 2</Text>
4</List>

listRowSeparator#

Sets the visibility of the separator line for a specific row.

Type#

1listRowSeparator?: Visibility | {
2  visibility: Visibility
3  edges: VerticalEdgeSet
4}

Visibility options:#

• "visible" – Always show the separator
• "hidden" – Hide the separator
• "automatic" – System default behavior

VerticalEdgeSet options:#

• "top" | "bottom" | "all"

Example#

1<Text
2  listRowSeparator={{
3    visibility: "hidden",
4    edges: "bottom"
5  }}
6>
7  No Bottom Separator
8</Text>

listRowSeparatorTint#

Sets the tint color of the separator for a specific row.

Type#

1listRowSeparatorTint?: Color | {
2  color: Color
3  edges: VerticalEdgeSet
4}

Example#

1<Text
2  listRowSeparatorTint={{
3    color: "rgba(255,0,0,0.5)",
4    edges: "bottom"
5  }}
6>
7  Colored Separator
8</Text>

listRowBackground#

Places a custom background behind a list row.

Type#

1listRowBackground?: VirtualNode

Example#

1<Text
2  listRowBackground={
3    <Rectangle fill="#f0f0f0" cornerRadius={10} />
4  }
5>
6  Row with background
7</Text>

listSectionSpacing#

Controls the spacing between adjacent list sections.

Type#

1listSectionSpacing?: ListSectionSpacing

ListSectionSpacing options:#

• "default" – System default spacing
• "compact" – Smaller spacing
• A number – Custom spacing in points

Example#

1<List listSectionSpacing="compact">
2  <Section>...</Section>
3  <Section>...</Section>
4</List>

listSectionSeparator#

Controls the visibility of the separator between list sections.

Type#

1listSectionSeparator?: Visibility | {
2  visibility: Visibility
3  edges: VerticalEdgeSet
4}

Example#

1<Section
2  listSectionSeparator={{
3    visibility: "hidden",
4    edges: "top"
5  }}
6>
7  <Text>Section Content</Text>
8</Section>

listSectionSeparatorTint#

Sets the separator tint color for a section.

Type#

1listSectionSeparatorTint?: Color | {
2  color: Color
3  edges: VerticalEdgeSet
4}

Example#

1<Section
2  listSectionSeparatorTint={{
3    color: "#cccccc",
4    edges: "bottom"
5  }}
6>
7  <Text>Styled Section</Text>
8</Section>

Supporting Types#

EdgeInsets#

1{
2  top: number
3  bottom: number
4  leading: number
5  trailing: number
6}

Visibility#

1"automatic" | "visible" | "hidden"

VerticalEdgeSet#

1"top" | "bottom" | "all"

Color formats#

You can define color in three ways:

• Named keyword: "green", "label", etc.
• Hex: "#ff0000"
• RGBA: "rgba(255,0,0,1)"

Summary Table#